<template>
	<view class="spread flex justify-center" :class="{'box-spread': showFlag}">
		<view class="flex flex-col" style="gap: 30rpx;zoom: 0.8;">
			<view class="flex items-center justify-center" style="gap: 30rpx;" v-for="(arr, idx) in list" :key="idx">
				<view class="spread-item flex flex-col items-center" v-for="(item, i) in arr" :key="i"
					:class="{'give-me': item.up == 6, 'give-her': item.up == 10}">
					<text class="spread-up">{{item.up}}</text>
					<template v-if="isAch == 1">
						<image :src="item.front" mode="widthFix" v-if="item.dir == 0"></image>
						<image :src="item.back" mode="widthFix" v-else></image>
					</template>
					<template v-else>
						<image src="@/static/tarot-bg.png" mode="widthFix"></image>
						<text class="spread-name">{{item.label}}</text>
					</template>
					<text class="spread-label flex justify-center">{{item.state}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		onMounted,
		nextTick,
	} from 'vue';
	const cardList = inject('cardList')
	const showFlag = inject('showFlag')
	const isAch = ref(0)
	isAch.value = uni.getStorageSync('user').ach
	const list = ref([
		[{
			up: 1,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '初月',
		}, {
			up: 2,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '对方',
		}, {
			up: 3,
			dir: 0,
			front: '',
			back: '',
			state: '看我',
			label: '对方',
		}, {
			up: 4,
			dir: 0,
			front: '',
			back: '',
			state: '希望',
			label: '对方',
		}, {
			up: 5,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '六月',
		}],
		[{
			up: 6,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '次月',
		}, {
			up: 7,
			dir: 0,
			front: '',
			back: '',
			state: '模式',
			label: '相处',
		}, {
			up: 8,
			dir: 0,
			front: '',
			back: '',
			state: '结局',
			label: '最终',
		}, {
			up: 9,
			dir: 0,
			front: '',
			back: '',
			state: '影响',
			label: '环境',
		}, {
			up: 10,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '五月',
		}],
		[{
			up: 11,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '三月',
		}, {
			up: 12,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '自身',
		}, {
			up: 13,
			dir: 0,
			front: '',
			back: '',
			state: '对方',
			label: '我看',
		}, {
			up: 14,
			dir: 0,
			front: '',
			back: '',
			state: '希望',
			label: '我的',
		}, {
			up: 15,
			dir: 0,
			front: '',
			back: '',
			state: '状态',
			label: '四月',
		}]
	])
	onMounted(() => {
		nextTick(() => {
			if (isAch.value == 1 && cardList.value?.length) {
				dataFormat()
			}
		})
	})
	const dataFormat = () => {
		list.value.map(arr => {
			arr.map((item) => {
				cardList.value.map((card, idx) => {
					if (item.up == (idx + 1)) {
						item.dir = card.dir
						item.front = card.tarot.front
						item.back = card.tarot.back
					}
				})
			})
		})
	}
</script>

<style>
	@import "./spread.css";

	.spread {
		padding: 40rpx 0;
		height: auto;
	}

	.spread14-label {
		font-size: 16rpx;
		font-weight: bold;
		white-space: nowrap;
	}

	.spread-item {
		position: relative;
	}

	.give-me::before {
		content: "给我的建议";
		position: absolute;
		top: 50%;
		left: 0;
		transform: translateX(calc(-100% - 10rpx));
		font-size: 24rpx;
		white-space: nowrap;
	}

	.give-her::before {
		content: "给对方的建议";
		position: absolute;
		top: 50%;
		right: 0;
		transform: translateX(calc(100% + 10rpx));
		font-size: 24rpx;
		white-space: nowrap;
	}
</style>